var centerX,centerY,bnode;
var deg=0;
var i = [0.512, 0.64, 0.8, 1, 1.25, 1.5625, 1.953125];
var fi =3;
$(function(){
	var width = window.innerWidth;
	var height = window.innerHeight;
	$("#galaxy").width(width);
	$("#galaxy").height(height);
	var data = fakeDate();
	showRelation(data);
	var recommendData = recommenders();
	getRecommenderHtml(recommendData);
    //推荐人点击事件
	$("#pic_ul").on("click","#pic_ul li",function(){
		var id = $(this).attr("id");
		var centerId = $(".center_node").attr("id");
		if (id==centerId) {
			return false;
		}else{
			$("#galaxy").html('');
			fi=3;
			$(root).css("transform","scale("+i[fi]+","+i[fi]+")");
			var data = fakeDate2();
			showRelation(data);
		}
	})
    //鼠标放在头像上效果实现
	$('#galaxy').on("mouseover",".node",function(){  
	    $('.node').css("border","solid 2px #d2d2d2")  
	    $(".center_node").css("border","solid 3px #e8e8e8");
	    $(".center_node .bgr").hide();
	    $(".center_node .text").show();
	    $(this).css("border","solid 3px #fe98b3");
	    $(".line").find(".relation").hide();
	    $(".line").css("background-color","#e8e8e8");
		var data= $(this).attr("neighbor");
		data=JSON.parse(data);
		var position = $(this).attr("position");
		position = JSON.parse(position);
		var id= $(this).attr("id");
		var deg = $(this).attr("deg");
		var level = $(this).attr("level");
		var relation =$(this).attr("relation");
		var type =$(this).attr("type");
		$(".line"+id+"").remove();
		drawSecondPic(data,position,deg,id,level,relation,type);
	});
    //点击头像跳转
	$('#galaxy').on("click",".node,.littlenode",function(){ 
		var id = $(this).attr("id");
		var level =$(this).attr("level");
        fi=3;
        $(root).css("transform","scale("+i[fi]+","+i[fi]+")");
		if (level!=0) {
			$("#galaxy").html('');
            var data = fakeDate2();
		    showRelation(data);
		};		
	});
   // //查看介绍
   //  $('#galaxy').on("click",".bgr",function(){
   //  	$("#bg_mark").show();
   //  	$("#con_box").show();
   //  })
   //  //关闭介绍框
   //  $('#con_box').on("click","#desc_close",function(){
   //  	$("#bg_mark").hide();
   //  	$("#con_box").hide();
   //  })

	  var root = document.getElementById('galaxy');
	  var isDown = false;
	  var startX,startY,endX,endY;
      //鼠标按压事件
	  $(root).on('mousedown', function(e){
	    isDown=true;
	    startX = e.pageX;
	    startY = e.pageY;
	  });
    //图像平移
	  $(root).on('mousemove',function(e){
	  	if (isDown==true) {
	  		fi=3;
	  		endX = e.pageX;
	  		endY = e.pageY;
	  		var movex = endX- startX;
	  		var movey = endY - startY;
	  		$(root).css("transform","translate("+movex+"px,"+movey+"px)");
	  	};
	  })
      
	  $(root).on('mouseup',function(e){	
	  	isDown=false;
	  })

     // 滚轮事件     
	  $(root).on("mousewheel DOMMouseScroll", function (e) {
		    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
		                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));     
		                         // firefox	    
		    if (delta > 0) {
		        // 向上滚
		      if (fi>=0 && fi<6) {
		      	fi++;	      	
		       $(root).css("transform","scale("+i[fi]+","+i[fi]+")");		     
		      };  
		      
		    } else if (delta < 0) {
		        // 向下滚
		        if (fi>0 && fi<7) {
		        	fi--;
		        	$(root).css("transform","scale("+i[fi]+","+i[fi]+")");
		        };		       		      
		    }
      });
 })
    
   
     function createNode(type) {
            var node = document.createElement('div');
            node.classList.add('node');
            if (type == 1){
                node.classList.add('type1');
            }else if(type == 2){
                node.classList.add('type2');
            }else if(type == 3){
                node.classList.add('type3');
            }
            return node;
        }

      function createLittleNode(type) {
            var node = document.createElement('div');
            node.classList.add('littlenode');
            if (type == 1){
                node.classList.add('type1');
            }else if(type == 2){
                node.classList.add('type2');
            }else if(type == 3){
                node.classList.add('type3');
            }
            return node;
        }

        function createLine(node,type,relation) {
            var line = document.createElement('div');
            line.classList.add('line');
            var relation_label = document.createElement('div');
            relation_label.innerText = relation;
            relation_label.classList.add('relation');
            if (type == 1){
                line.classList.add('linetype1');
                relation_label.classList.add('type1');
            }else if(type == 2){
                line.classList.add('linetype2');
                relation_label.classList.add('type2');

            }else if(type == 3){
                line.classList.add('linetype3');
                relation_label.classList.add('type3');

            }          
            line.appendChild(relation_label);
            line.relation_label = relation_label;
            return line;
        }

        function rotateLineStyles(line,center,position) {
            var pnode = position;
            var y = pnode.y - center.y;
            var x = pnode.x - center.x;
            var width = Math.sqrt(y * y + x * x);
            var a = Math.atan2(y,x);
            if(a < 0){
                a += Math.PI * 2;
            }
            return {
                after: {
                    width: width + 'px',
                    left: (center.x + x / 2 - width / 2) + 'px',
                    top: (center.y + y / 2) + 'px',
                    opacity: 1
                },
                before: {
                    transform: 'rotate(' + a / Math.PI * 180 + 'deg)'
                },
                relation_label: {
                    transform: 'translate(-50%,-50%) rotate(-' + a / Math.PI * 180 + 'deg)'
                }
            }
        }

    function getNodePostion(element) {
        var bodyRect = element.parentNode.getBoundingClientRect(),
                elemRect = element.getBoundingClientRect();
        return { x:elemRect.left - bodyRect.left + elemRect.width / 2, y:elemRect.top - bodyRect.top + elemRect.height / 2};
    }    

   function showRelation(data){
            var length = data.neighbor.length;
            var step = Math.PI * 2 / length;
            var root = document.getElementById('galaxy');
            var centerNode = createNode();
            centerNode.classList.add('center_node');
            centerNode.style.left = "50%";
            centerNode.style.top = "50%";
            centerNode.style.backgroundImage='url('+data.imgurl+')';
            var nameText = document.createElement('div');
            nameText.classList.add('w1');
            nameText.classList.add('text');
            nameText.innerText=data.name;
            centerNode.appendChild(nameText);
            // 添加属性
            var neighborData = JSON.stringify(data.neighbor);
            $(centerNode).attr("neighbor",neighborData);
            $(centerNode).attr("id",data.id);
            $(centerNode).attr("deg",step);
            $(centerNode).attr("level",0);
            $(centerNode).attr("relation",'');
            $(centerNode).attr("type",0);
            root.appendChild(centerNode);
            $("#desc_img").attr("src",data.imgurl);
            $("#desc_intro").html(data.intro);
            $("#desc_more").attr("href",data.baike);
            var center = getNodePostion(centerNode);
            bnode=centerNode;
            centerX=center.x;
            centerY=center.y;
            var centerStr= JSON.stringify(center);
            $(centerNode).attr("position",centerStr);
            //关系人
            var items = data.neighbor;
            for(var i = 0;i < items.length;i++){
                var item = items[i];           
                var node = createNode(item.type);
                var radius = 180;           
                var x = radius * Math.cos(step * i) + center.x;
                var y = radius * Math.sin(step * i) + center.y;
                node.style.backgroundImage='url('+item.imgurl+')';
                var nameText = document.createElement('div');
                nameText.classList.add('w2');
                nameText.classList.add('text');
                nameText.innerText=item.name;
                node.appendChild(nameText);
                root.appendChild(node);
                var line = createLine(node,item.type,item.relation);
                root.appendChild(line);
                var line_styles = rotateLineStyles(line,center,{x:x,y:y});
                $(line).css(line_styles.before);
                $(line).animate(line_styles.after);
                $(line.relation_label).css(line_styles.relation_label);
                $(node).animate({
                    left: x + "px",
                    top: y + "px",
                    opacity: 1
                });
                //添加属性
                var position ={x:x,y:y};
                $(node).attr("id",item.id);
                $(node).attr("deg",step*i);
                var data = JSON.stringify(item.neighbor);
                $(node).attr("neighbor",data);
                $(node).attr("level",1);
                $(node).attr("relation",item.relation);
                $(node).attr("type",item.type);
                position = JSON.stringify(position)
                $(node).attr("position",position);
            }
            $(centerNode).animate({'opacity':1});
           }   
// 鼠标移到头像上效果实现
function drawSecondPic(data,position,deg,id,level,relation,type){
   var length = data.length;
   var radius = 120;
   var root = document.getElementById('galaxy');
   if (level!=0) {
   	    var line = createLine(node,type,relation);
	    line.classList.add("line"+id+"");
	    root.appendChild(line);
	    var center = $(".center_node").attr("position");
	    center = JSON.parse(center);
	    //var center =getNodePostion(bnode);;
	    var line_styles = rotateLineStyles(line,center,{x:position.x,y:position.y});
	    $(line).css(line_styles.before);
	    var style=line_styles.after;
	    $(line).css({"width":style.width,"left":style.left,"top":style.top,opacity:1});
	    $(line.relation_label).css(line_styles.relation_label);
   }else{        
   	    $(".center_node .text").hide();
   	    $(".center_node .bgr").show();  	   
   }
   for(var i=0;i<length;i++){
        var item = data[i];  
        if (length>0 && $(".node"+id+"").length<length && level==1) {
        	var node = createLittleNode(item.type);
        	node.classList.add("node"+id+"");
	        node.style.backgroundImage='url('+item.imgurl+')';
	        var nameText = document.createElement('div');
	        nameText.classList.add('text');
	        nameText.innerText=item.name;
	        node.appendChild(nameText);
	        root.appendChild(node);                    
        }
        if (level==0) {
        	radius=180;
        	var x = radius * Math.cos(deg*i) + position.x;
            var y = radius * Math.sin(deg*i) + position.y;   
        }else{
            var x = radius * Math.cos(deg-0.4*i) + position.x;
            var y = radius * Math.sin(deg-0.4*i) + position.y; 
            radius=radius+50;
            $(node).css({"left":x+"px","top":y+"px",opacity:1});
	        $(node).attr("id",item.id);
	      }
	        var line = createLine(node,item.type,item.relation);
	        line.classList.add("line"+id+"");
	        root.appendChild(line);
	        var line_styles = rotateLineStyles(line,position,{x:x,y:y});
	        $(line).css(line_styles.before);
	        var style=line_styles.after;
	        $(line).css({"width":style.width,"left":style.left,"top":style.top,opacity:1});
	        $(line.relation_label).css(line_styles.relation_label);	       
      }                        
}
function clickNode(){
	$("#galaxy").html('');
	fi=3;
	$("#galaxy").css("transform","scale(1,1)");
	var id = $(this).attr("id");
	var data = fakeDate2();
	showRelation(data);
}

// 测试数据-初始数据
 function fakeDate(){
	return{
    id:1,
	name:"邓紫棋",
	imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
	intro:"邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
    baike:"http://baike.sogou.com/v589530.htm",
    type: 0,
    relation:'',
    neighbor:[
       {
       	id:2,
       	name:"李晨",
       	imgurl:'http://www.ld12.com/upimg358/allimg/c150421/14296003195460-4010X.jpg',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:3,
       	relation:"男友",
       	neighbor:[
             {   
             	id:3,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:4,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:5,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },     
       {    
       	    id:6,
            name:'邓超',
         	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
            intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
            baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
            type:2,
            relation:"搭档",
            neighbor:[
             {  
             	id:7,
             	name:'孙俪',
             	imgurl:'http://n1.itc.cn/img8/wb/smccloud/fetch/2015/05/27/152357250313557442.JPEG',
             	intro:'孙俪，原名孙丽，1982年9月26日出生于上海市，中国内地女演员',
                baike:'http://baike.baidu.com/link?url=b79tG0LbZJ83eRBIjeGhgjy_dnhi9ryLCZss-tfon5G0vL2ZZ24GBjA1sARBM9lAKe901Q7I2HvG5OyegUqNMF7KDntYB-Ki_zywaCVSI6O',
                type:1,
                relation:'老婆',
                neighbor:[]

             }
            
            ]
       	
       },
       {
       	id:10,
       	name:"李小璐",
       	imgurl:'http://img04.sogoucdn.com/app/a/10010016/ad10d0f986cad7b9f5f1761c6cf4bc41',
       	intro:'李小璐，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:2,
       	relation:"好友",
       	neighbor:[
             {  
             	id:11,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:12,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:13,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },
         {
        id:14,
       	name:"柳岩",
       	imgurl:'http://img04.sogoucdn.com/app/a/10010016/23c61161ac914985927808f6b0fe1897',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:2,
       	relation:"好友",
       	neighbor:[
             {
             	id:15,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:16,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:17,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             },
             {
             	id:22,
		       	name:"赵丽颖",
		       	imgurl:'http://img01.sogoucdn.com/app/a/10010016/34643b59377ae874b7126c7392a51948',
		       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
		       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
		       	type:2,
		       	relation:"好友",
		       	neighbor:[]
             }
       	  ]
       },
       {
        id:18,
       	name:"林妙可",
       	imgurl:'http://img02.sogoucdn.com/app/a/10010016/61a72d57ed0833e80f5fff59d881f81b',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:1,
       	relation:"妹妹",
       	neighbor:[
             {  
             	id:19,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:20,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:21,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },
       {
        id:22,
       	name:"林志玲",
       	imgurl:'http://img04.sogoucdn.com/app/a/10010016/a276034c43d8293266a71586a2736dde',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:2,
       	relation:"好友",
       	neighbor:[
             {  
             	id:23,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:24,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:25,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       }

    ]
 }
}
//测试数据-点击变化的数据
function fakeDate2(){
	return{
    id:1,
	name:"范冰冰",
	imgurl:"http://img03.sogoucdn.com/app/a/10010016/3fa8525c268a95c6657fc7eead22068c",
	intro:"范冰冰（Fan Bingbing，1981年9月16日-）生于山东青岛，影视女演员、歌手。1998年参演电视剧《还珠格格》成名，2001年起进军电影圈。2004年主演电影《手机》获得第27届大众电影百花奖最佳女主角奖,同时该片也获得大众电影百花奖最佳故事片奖。",
    baike:"http://baike.baidu.com/link?url=Pwg8Ptce-gP5No8ASynW7_EslcrJFGGyoaRxLhScTyGTYvDc33N0pOd6EPcw_qAWDSWKLZmTkfqXtSUwmQMMFRz4OBFaD2WRYHFGL3XUZjDR_Ay1A-3Mr639wh-YDc-l",
    type: 0,
    relation:'',
    neighbor:[
       {
       	id:2,
       	name:"李晨",
       	imgurl:'http://www.ld12.com/upimg358/allimg/c150421/14296003195460-4010X.jpg',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:3,
       	relation:"男友",
       	neighbor:[
             {   
             	id:3,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:4,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:5,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },     
       {    
       	    id:6,
            name:'邓超',
         	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
            intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
            baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
            type:2,
            relation:"搭档",
            neighbor:[
             {  
             	id:7,
             	name:'孙俪',
             	imgurl:'http://n1.itc.cn/img8/wb/smccloud/fetch/2015/05/27/152357250313557442.JPEG',
             	intro:'孙俪，原名孙丽，1982年9月26日出生于上海市，中国内地女演员',
                baike:'http://baike.baidu.com/link?url=b79tG0LbZJ83eRBIjeGhgjy_dnhi9ryLCZss-tfon5G0vL2ZZ24GBjA1sARBM9lAKe901Q7I2HvG5OyegUqNMF7KDntYB-Ki_zywaCVSI6O',
                type:1,
                relation:'老婆',
                neighbor:[]

             }
            
            ]
       	
       },
       {
       	id:10,
       	name:"丁文琪",
       	imgurl:'http://e.hiphotos.baidu.com/baike/w=400/sign=592ba8199e25bc312b5d00986edd8de7/3ac79f3df8dcd100ce7f85f6758b4710b8122f01.jpg',
       	intro:'丁文琪，演员、歌手。高中时就读台北市景美女中，并参加热音社。后来背着吉他在路上被经纪公司相中而成为艺人。丁文琪的处女作『我的丁文琪』专辑，制作人、音乐人、邀歌作者她全程参与、并提出名单。还参演了电视剧《眉飞色舞》《巴黎恋歌》等。',
       	baike:'http://baike.sogou.com/v802428.htm',
       	type:2,
       	relation:"好友",
       	neighbor:[
             {  
             	id:11,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:12,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:13,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },
         {
        id:14,
       	name:"杨幂",
       	imgurl:'http://img03.sogoucdn.com/app/a/10010016/16c61c834d37da3732fcfbba3cfca74c',
       	intro:'杨幂，1986年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:1,
       	relation:"好友",
       	neighbor:[
             {
             	id:15,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:16,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:17,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       },
       {
        id:18,
       	name:"高圆圆",
       	imgurl:'http://img02.sogoucdn.com/app/a/10010016/1c5b5e746b788824323777f05921eb53',
       	intro:'高圆圆，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:2,
       	relation:"闺蜜",
       	neighbor:[
             {  
             	id:19,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:20,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:21,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             },
             {
             	id:22,
		       	name:"赵丽颖",
		       	imgurl:'http://img01.sogoucdn.com/app/a/10010016/34643b59377ae874b7126c7392a51948',
		       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
		       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
		       	type:2,
		       	relation:"好友",
		       	neighbor:[]
             }
       	  ]
       },
       {
        id:22,
       	name:"赵丽颖",
       	imgurl:'http://img01.sogoucdn.com/app/a/10010016/34643b59377ae874b7126c7392a51948',
       	intro:'李晨，1978年11月24日出生于北京市，中国内地影视男演员、监制、赛车手，毕业于北京群星艺术学院',
       	baike:'http://baike.baidu.com/link?url=VKnDKuKnOmzn9oFziSDOXay4CrMHbM5MeEbXgvAnorWueo78xlmOhwK5F7lGv_BNWuXvSMLnkvz5U9hwz4qJ6iqmPBtZxabH75c0c8WOl4i',
       	type:2,
       	relation:"好友",
       	neighbor:[
             {  
             	id:23,
             	name:'邓超',
             	imgurl:'http://tupian.qqjay.com/tou3/2015/0615/4bbc02a66283fb8899ec4a78d258a51d.jpg',
                intro:'邓超，1979年2月8日生于江西南昌，中国内地男演员、电影导演、投资出品人、互联网投资人。',
                baike:'http://baike.baidu.com/link?url=21i-lE-pJckoro5jb59P0LXGIFj2DZmOiFmyL75WP7OlREiEAqdDcDNc8kzFOY9GUz6ys1eKSgB0-18rQJqt8gSu-LNPKw53CDIwKJENYiy',
                type:2,
                relation:"搭档",
                neighbor:[]

             },
             {  
             	id:24,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
               
             },
             {  
             	id:25,
             	name:"邓紫棋",
				imgurl:"http://img03.sogoucdn.com/app/a/10010016/84d303c6675a032d8ecfc675f54341a7",
				intro: "邓紫棋(G.E.M.)，中国香港创作型女歌手。1991年8月16日生于中国上海",
			    baike: "http://baike.sogou.com/v589530.htm",
			    type: 3,
			    relation:'前女友',
			    neighbor:[]
              
             }
       	  ]
       }

    ]
 }
}

 function getRecommenderHtml(data){
  var length = data.length;
  var html='';
  for(var i=0;i<length;i++){
    html+='<li name="'+data[i].name+'" id="'+data[i].id+'"><a href="#"><img src="'+data[i].img+'" alt=""><span>'+data[i].name+'</span></a></li>';
  }
  $("#pic_ul").html(html);
 }
        
 function recommenders(){
 	return [
        {
            "id": "3336090",
            "name": "李易峰",
            "img": "http://img03.sogoucdn.com/app/a/10010016/723d22c1fd316f66dbcd56744d2395de"
        },
        {
            "id": "1754345",
            "name": "杨幂",
            "img": "http://img03.sogoucdn.com/app/a/10010016/16c61c834d37da3732fcfbba3cfca74c"
        },
        {
            "id": "1772965",
            "name": "刘亦菲",
            "img": "http://img01.sogoucdn.com/app/a/10010016/3b6ce9dbafed5d3692f5cd35682d734a"
        },
        {
            "id": "3002788",
            "name": "范冰冰",
            "img": "http://img03.sogoucdn.com/app/a/10010016/3fa8525c268a95c6657fc7eead22068c"
        },
        {
            "id": "891487",
            "name": "赵丽颖",
            "img": "http://img01.sogoucdn.com/app/a/10010016/34643b59377ae874b7126c7392a51948"
        },
        {
            "id": "2274786",
            "name": "周星驰",
            "img": "http://img02.sogoucdn.com/app/a/10010016/d905e82548d019e696d310dd23f119d4"
        },
        {
            "id": "1073598",
            "name": "高圆圆",
            "img": "http://img02.sogoucdn.com/app/a/10010016/1c5b5e746b788824323777f05921eb53"
        },
        {
            "id": "49581",
            "name": "刘诗诗",
            "img": "http://img03.sogoucdn.com/app/a/10010016/efde146b3e63ef4c9e46d9228cba10ff"
        },
        {
            "id": "72865",
            "name": "成龙",
            "img": "http://img03.sogoucdn.com/app/a/10010016/6405702f6a8676a867b1c1c2ccd0a7f1"
        },
        {
            "id": "3296803",
            "name": "杨颖",
            "img": "http://img02.sogoucdn.com/app/a/10010016/06c3ebc5acfe9ab12d5cf4f7aa248e84"
        },
        {
            "id": "1617818",
            "name": "张杰",
            "img": "http://img02.sogoucdn.com/app/a/10010016/c05ba66a511d4f5736443536414a2c03"
        },
        {
            "id": "3404114",
            "name": "邓紫棋",
            "img": "http://www.jushuo.com/uploads/allimg/150508/4-15050QG1080-L.jpg"
        },
        {
            "id": "3749887",
            "name": "张柏芝",
            "img": "http://img01.sogoucdn.com/app/a/10010016/2837ad7e08208b0500d5cfcf68062c5d"
        },
        {
            "id": "204737",
            "name": "朱亚文",
            "img": "http://img04.sogoucdn.com/app/a/10010016/eec309d58ee62b8eaf67df8c237b1b84"
        },
        {
            "id": "555812",
            "name": "赵本山",
            "img": "http://img01.sogoucdn.com/app/a/10010016/26a23db15df032642ad5f76b4f8b1f7d"
        },
        {
            "id": "3673385",
            "name": "唐嫣",
            "img": "http://img01.sogoucdn.com/app/a/10010016/b53e6293d978208aef3f08bd07000080"
        },
        {
            "id": "3056320",
            "name": "金钟国",
            "img": "http://img02.sogoucdn.com/app/a/10010016/f606ab84f1cca04b25c5e7026667bc44"
        },
        {
            "id": "201095",
            "name": "林志玲",
            "img": "http://img04.sogoucdn.com/app/a/10010016/a276034c43d8293266a71586a2736dde"
        },
        {
            "id": "946631",
            "name": "周迅",
            "img": "http://img04.sogoucdn.com/app/a/10010016/7052a348bfd27698951048e741024683"
        },
        {
            "id": "2772548",
            "name": "谢娜",
            "img": "http://img02.sogoucdn.com/app/a/10010016/be20f3cf69639240897b7a6d3acc98e0"
        },
        {
            "id": "2726321",
            "name": "周润发",
            "img": "http://img02.sogoucdn.com/app/a/10010016/a4c2654b74e9090630c0121eba898c0a"
        },
        {
            "id": "59881",
            "name": "吴京",
            "img": "http://img01.sogoucdn.com/app/a/10010016/c9aa0390596bc1abe2da40b29a75122b"
        },
        {
            "id": "1243573",
            "name": "刘德华",
            "img": "http://img01.sogoucdn.com/app/a/10010016/dfca3d6cb2fc9362e548fbd8592da982"
        },
        {
            "id": "557729",
            "name": "李连杰",
            "img": "http://img02.sogoucdn.com/app/a/10010016/1b2d8f895292b8c98f7b6e6c1a3f8b7d"
        },
        {
            "id": "3768556",
            "name": "邓超",
            "img": "http://img04.sogoucdn.com/app/a/10010016/f807d41aa5acc9d8e28804712c92f5cc"
        },
        {
            "id": "2750259",
            "name": "王宝强",
            "img": "http://img01.sogoucdn.com/app/a/10010016/af684c46426270d7e18b3ab3af6241f9"
        },
        {
            "id": "3921402",
            "name": "林妙可",
            "img": "http://img02.sogoucdn.com/app/a/10010016/61a72d57ed0833e80f5fff59d881f81b"
        },
        {
            "id": "282627",
            "name": "彭于晏",
            "img": "http://img04.sogoucdn.com/app/a/10010016/1ad08487d32a3ecf96657907e14cf996"
        },
        {
            "id": "2072141",
            "name": "宋祖英",
            "img": "http://img02.sogoucdn.com/app/a/10010016/28da0afa14db21575d058fe325ae9986"
        },
        {
            "id": "1504334",
            "name": "佟丽娅",
            "img": "http://img02.sogoucdn.com/app/a/10010016/330d5b4145d9f67706448a34717b9533"
        },
        {
            "id": "6751126",
            "name": "张翰",
            "img": "http://img02.sogoucdn.com/app/a/10010016/e728d2a3089e018fc154ea712fa705e3"
        },
        {
            "id": "1473005",
            "name": "郑秀晶",
            "img": "http://img01.sogoucdn.com/app/a/10010016/9ac19228bc26dc1595b392f19cc44576"
        },
        {
            "id": "6756035",
            "name": "武则天",
            "img": "http://img02.sogoucdn.com/app/a/10010016/fe5f69208c889e44600131d0b4bcc18a"
        },
        {
            "id": "1902409",
            "name": "黄渤",
            "img": "http://img04.sogoucdn.com/app/a/10010016/9259240b13d6ad08193ba427e069bc53"
        },
        {
            "id": "106",
            "name": "李小龙",
            "img": "http://img03.sogoucdn.com/app/a/10010016/ea6731e6908480a53978b3ddd1e70505"
        },
        {
            "id": "2565599",
            "name": "陈赫",
            "img": "http://img03.sogoucdn.com/app/a/10010016/874900bce885e66a5d3b32c6a6dba30b"
        },
        {
            "id": "2047446",
            "name": "林志颖",
            "img": "http://img01.sogoucdn.com/app/a/10010016/a4a14bddba35b4701b869e4611f077eb"
        },
        {
            "id": "123724",
            "name": "林心如",
            "img": "http://img03.sogoucdn.com/app/a/10010016/049c16a0ea624c8d7319292e76c8ecdd"
        },
        {
            "id": "797644",
            "name": "柳岩",
            "img": "http://img04.sogoucdn.com/app/a/10010016/23c61161ac914985927808f6b0fe1897"
        },
        {
            "id": "1236263",
            "name": "赵又廷",
            "img": "http://img02.sogoucdn.com/app/a/10010016/2ba70fcb831fa87a883d4e7e0430b88b"
        },
        {
            "id": "6795882",
            "name": "周杰伦",
            "img": "http://img04.sogoucdn.com/app/a/10010016/2fc8e0f0e508e68d1f0e36be8a7a866e"
        },
        {
            "id": "1144893",
            "name": "郑恺",
            "img": "http://img02.sogoucdn.com/app/a/10010016/445fa42779ff922cc746c2433720c71b"
        },
        {
            "id": "478684",
            "name": "王祖蓝",
            "img": "http://img03.sogoucdn.com/app/a/10010016/7e0877b03825e2a7894fe8fb7000892f"
        },
        {
            "id": "2507167",
            "name": "李小璐",
            "img": "http://img04.sogoucdn.com/app/a/10010016/ad10d0f986cad7b9f5f1761c6cf4bc41"
        },
        {
            "id": "1586078",
            "name": "胡歌",
            "img": "http://img02.sogoucdn.com/app/a/10010016/854af46bceb21bf237df930e0f3eff12"
        },
        {
            "id": "3190771",
            "name": "李晨",
            "img": "http://img03.sogoucdn.com/app/a/10010016/8be4cd32969ab7872f288bed200c4bb6"
        },
        {
            "id": "2294559",
            "name": "孙俪",
            "img": "http://img02.sogoucdn.com/app/a/10010016/dee216562a89be97720666d7468bf5f1"
        },
        {
            "id": "1294857",
            "name": "谢霆锋",
            "img": "http://img02.sogoucdn.com/app/a/10010016/0ae867b47af29f331934fd4ed4dd70e8"
        },
        {
            "id": "807780",
            "name": "黄晓明",
            "img": "http://img01.sogoucdn.com/app/a/10010016/2329e70208f431431aa80ebeb5dd03fd"
        },
        {
            "id": "2177916",
            "name": "舒淇",
            "img": "http://img03.sogoucdn.com/app/a/10010016/dd37129ba18997123e9de8b3e1e33856"
        }
    ]
 }                         